<html>
    <head>
        <title>Vote on Content</title>
        <script src="bundle.js"></script>
    </head>
    <body>
        <div class="container" id="content">
            <h1>Vote on Content</h1>
            <p style="font-style:italic">The default user in this tutorial is part of the testnet.steem.vc environment. If creating or voting on a post doesn't work, someone may have changed its keys.
                Creating your own user on the testnet is a very good thing to know how to do. Docs are available <a href="https://testnet.steem.vc/">here</a>.</p>
            <form>
                <h4>Create test Content</h4>
                <p>If you know of a post or comment upon which you wish to cast your vote you can skip this section.</p>
                <p>If you need to create a post to try out the vote operation, the button below will create a post for you
                    (using the username and private key in the form), and then fill in the 'Post Permlink' field.</p>
                <div class="form-group row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">
                        Create a post
                    </label>
                    <div class="col-sm-10">
                        <input
                            id="createPostBtn"
                            type="button"
                            value="Create test post"
                            onclick="createPost()"
                            class="btn btn-primary"
                        />
                    </div>
                </div>
                <div
                    class="form-group row"
                    id="postResult"
                    style="display: none;"
                >
                    <label for="staticEmail" class="col-sm-2 col-form-label">
                        Post result
                    </label>
                    <div class="col-sm-10">
                        <div id="postLink" class="form-control-plaintext"></div>
                    </div>
                </div>
            </form>
            <h4>Vote</h4>
            <form>
                <div class="form-group row">
                    <label for="username" class="col-sm-2 col-form-label">
                        Username
                    </label>
                    <div class="col-sm-10">
                        <input
                            id="username"
                            type="text"
                            class="form-control"
                            value=""
                        />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="postingKey" class="col-sm-2 col-form-label">
                        Posting private key
                    </label>
                    <div class="col-sm-10">
                        <input
                            type="text"
                            class="form-control"
                            id="postingKey"
                            value=""
                        />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="author" class="col-sm-2 col-form-label">
                        Author
                    </label>
                    <div class="col-sm-10">
                        <input
                            type="text"
                            class="form-control"
                            id="author"
                            value=""
                        />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="permlink" class="col-sm-2 col-form-label">
                        Post Permlink
                    </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="permlink" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="voteWeight" class="col-sm-2 col-form-label">
                        Weight <span id="currentWeight"></span>
                    </label>
                    <div class="col-sm-10">
                        <input
                            type="range"
                            min="-10000"
                            max="10000"
                            value="0"
                            class="form-control"
                            id="voteWeight"
                        />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="offset-sm-2 col-sm-10">
                        <input
                            id="submitVoteBtn"
                            type="button"
                            value="Submit Vote"
                            onclick="submitVote()"
                            class="btn btn-primary"
                        />
                    </div>
                </div>
                <div
                    class="form-group row"
                    id="resultContainer"
                    style="display:flex"
                >
                    <label for="result" class="col-sm-2 col-form-label">
                        Result
                    </label>
                    <div class="col-sm-10">
                        <div id="result" class="form-control-plaintext">Results will appear here.</div>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
